<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大聪明</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <link rel="stylesheet" th:href="@{css/index.css}"/>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
</head>

<body>

<div id="app">
    <el-container class="container">
        <el-header class="title">大聪明</el-header>
        <el-divider></el-divider>
        <el-main>
            <image-com v-for="(el, index) in msgList" :src="el.image" :message="el.msg" :cls="el.cls"/>
        </el-main>
        <el-divider></el-divider>
        <el-footer style="text-align: center;">
            <el-input v-model="message" placeholder="Please input" clearable class="input"></el-input>
            <el-button class="btn" :type="type" :disabled="loading" @click="ask">
                <el-icon v-if="!loading">
                    <Promotion/>
                </el-icon>
                <el-icon v-else class="is-loading">
                    <Loading/>
                </el-icon>
                <span style="margin-left: 5px;">发送</span>
            </el-button>
        </el-footer>
    </el-container>
</div>
<script>
    const {
        createApp
    } = Vue

    let app = createApp({
        data() {
            return {
                visible: false,
                msg: 'test',
                robot: '/images/pic02.ico',
                user: '/images/pic03.ico',
                type: 'primary',
                loading: false,
                msgList: [{
                    image: '/images/pic02.ico',
                    msg: '请输入问题',
                }],
                message: undefined
            }
        },
        methods: {
            ask() {
                this.loading = true
                this.msgList.push({
                    image: this.user,
                    msg: this.message,
                    cls: 'img_box_right'
                })
                let msg = this.message
                this.message = ''
                this.msgList.push({
                    image: this.robot,
                    msg: '请稍后...'
                })
                axios({
                    url: '/open-ai/ask',
                    method: "POST",
                    data: {
                        q: msg
                    }
                }).then(res => {
                    if (res.data.code === 1) { // 请求成功
                        this.loading = false
                        let el = this.msgList.pop()
                        el.msg = res.data.data.answer
                        this.msgList.push(el)
                    }
                })
            }
        }
    })
    app.use(ElementPlus)
    app.component('image-com', {
        template: `
          <div class="img_box" :class="cls"><img class="img" :src=src />
          <div class="text_box">{{ message }}</div>
          </div>
        `,
        props: {
            src: String,
            message: String,
            cls: String
        },
    })
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.mount('#app');
</script>
</body>

</html>